<template>
  <div
      class="user-card bg-white/80 backdrop-blur-lg rounded-2xl shadow-xl overflow-hidden transition-all duration-300 ease-in-out">
    <!-- 顶部背景与操作区域 -->
    <div class="h-28 relative">
      <!-- 背景图或默认渐变色 -->
      <div v-if="user.backgroundImage" class="absolute inset-0 w-full h-full">
        <img :src="user.backgroundImage" alt="用户背景" class="w-full h-full object-cover">
        <div class="absolute inset-0 bg-black bg-opacity-20"></div>
      </div>
      <div v-else class="absolute inset-0 w-full h-full bg-gradient-to-br from-emerald-400 to-green-600"></div>
      <div class="absolute top-4 right-4">
        <!-- 如果是当前用户，显示编辑信息按钮 -->
        <button
            v-if="isCurrentUser"
            @click="handleEditClick"
            class="follow-button bg-white/30 hover:bg-white/50 backdrop-blur-sm text-white font-bold py-2 px-5 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center"
        >
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1.5" fill="none" viewBox="0 0 24 24"
               stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round"
                  d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
          </svg>
          <span>编辑资料</span>
        </button>

        <!-- 如果不是当前用户，显示关注按钮 -->
        <button
            v-else
            @click="handleFollowClick"
            class="follow-button bg-white/30 hover:bg-white/50 backdrop-blur-sm text-white font-bold py-2 px-5 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center"
        >
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1.5" viewBox="0 0 20 20" fill="currentColor">
            <path
                d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"/>
          </svg>
          <span>关注</span>
        </button>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="relative px-6 pb-6">
      <!-- 头像、昵称、会员 -->
      <div class="flex flex-col items-center -mt-16">
        <div class="relative avatar-wrapper">
          <img
              :src="user.avatar"
              alt="User Avatar"
              class="w-24 h-24 rounded-full border-4 border-white shadow-lg object-cover"
          >
          <div
              class="gender-badge absolute bottom-1 right-1 w-6 h-6 rounded-full flex items-center justify-center text-white text-base shadow-md"
              :class="user.gender === 'male' ? 'bg-blue-500' : 'bg-pink-400'">
            {{ user.gender === 'male' ? '♂' : '♀' }}
          </div>
        </div>

        <div class="flex items-center mt-3">
          <h1 class="text-2xl font-bold text-gray-800">{{ user.nickname }}</h1>
          <div v-if="user.isMember" class="ml-2 pt-1">
            <img src="https://img.icons8.com/color/48/crown.png" alt="Member" class="w-6 h-6" title="尊贵的会员">
          </div>
        </div>
        <p class="text-sm text-gray-600 mt-2 text-center truncate px-4"
           :title="user.schoolName + ' · ' + user.major + (user.class ? ' · ' + user.class : '')">
          <i class="fas fa-university mr-1 text-green-500"></i>{{ user.schoolName }}
        </p>
        <p class="text-sm text-gray-600 mt-2 text-center truncate px-4"
           :title="user.schoolName + ' · ' + user.major + (user.class ? ' · ' + user.class : '')">
          {{ user.major }}<span v-if="user.class" class="mx-1.5">·</span>{{ user.class }}
        </p>

        <!-- 个人简介 -->
        <p class="text-center text-sm text-gray-600 mt-4 px-2 italic">"{{ user.bio }}"</p>

        <!-- 兴趣标签 -->
        <div class="mt-4 flex flex-wrap justify-center gap-2 px-2">
          <span v-for="tag in user.tags" :key="tag"
                class="tag-item text-xs font-semibold bg-gray-200/80 text-gray-700 px-3 py-1.5 rounded-full transition-all duration-200 hover:scale-105 hover:shadow-md">
            {{ tag }}
          </span>
        </div>
      </div>

      <!-- 用户数据统计 -->
      <div class="user-stats mt-6 grid grid-cols-4 gap-2 p-1 bg-white/90 rounded-xl">
        <div @click="showList('following')"
             class="stat-item flex flex-col items-center p-1 rounded-lg transition-all duration-300 cursor-pointer">
          <div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center mb-1">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-orange-600" fill="none" viewBox="0 0 24 24"
                 stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round"
                    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
            </svg>
          </div>
          <p class="stat-value text-xl font-bold text-gray-800">{{ formatNumber(user.followingCount || 0) }}</p>
          <p class="stat-label text-xs text-gray-500 font-medium mt-1">关注</p>
        </div>
        <div @click="showList('followers')"
             class="stat-item flex flex-col items-center p-1 rounded-lg transition-all duration-300 cursor-pointer">
          <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center mb-1">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-pink-600" fill="none" viewBox="0 0 24 24"
                 stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round"
                    d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
            </svg>
          </div>
          <p class="stat-value text-xl font-bold text-gray-800">{{ formatNumber(user.followerCount || 0) }}</p>
          <p class="stat-label text-xs text-gray-500 font-medium mt-1">粉丝</p>
        </div>
        <div @click="showList('posts')"
             class="stat-item flex flex-col items-center p-1 rounded-lg transition-all duration-300 cursor-pointer">
          <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mb-1">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600" fill="none" viewBox="0 0 24 24"
                 stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
          </div>
          <p class="stat-value text-xl font-bold text-gray-800">{{ formatNumber(user.postCount || 0) }}</p>
          <p class="stat-label text-xs text-gray-500 font-medium mt-1">帖子</p>
        </div>
        <div class="stat-item flex flex-col items-center p-1 rounded-lg transition-all duration-300  ">
          <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mb-1">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24"
                 stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"/>
            </svg>
          </div>
          <p class="stat-value text-xl font-bold text-gray-800">{{ formatNumber(user.likeCount || 0) }}</p>
          <p class="stat-label text-xs text-gray-500 font-medium mt-1">获赞</p>
        </div>
        <!--        <div class="stat-item flex flex-col items-center p-1 rounded-lg transition-all duration-300 ">-->
        <!--          <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mb-1">-->
        <!--            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">-->
        <!--              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />-->
        <!--            </svg>-->
        <!--          </div>-->
        <!--          <p class="stat-value text-xl font-bold text-gray-800">{{ formatNumber(user.commentCount || 0) }}</p>-->
        <!--          <p class="stat-label text-xs text-gray-500 font-medium mt-1">评论</p>-->
        <!--        </div>-->
      </div>

      <!-- 详细信息四宫格 -->
      <div class="mt-6 pt-6 border-t border-gray-200/90">
        <div class="grid grid-cols-2 gap-4">
          <!-- 入学时间 -->
          <div class="info-grid-item">
            <div
                class="flex-shrink-0 w-9 h-9 rounded-lg flex items-center justify-center mr-3 bg-green-100 text-green-600">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                   stroke="currentColor" class="w-5 h-5">
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M4.26 10.147a60.438 60.438 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.906 59.906 0 0112 3.493a59.903 59.903 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0l-.07.042m15.482 0l.07.042m-15.552 0l-2.298-.42a1.125 1.125 0 01-.882-1.215c.316-1.921 1.748-3.413 3.513-4.146a59.902 59.902 0 014.246-1.391 59.902 59.902 0 014.246 1.391c1.765.733 3.197 2.225 3.513 4.146a1.125 1.125 0 01-.882 1.215l-2.298.42m-15.552 0a48.567 48.567 0 01-1.423-.23l-.001-.001c-.246-.043-.488-.09-.728-.138l-.002-.002a60.09 60.09 0 01-1.104-.238c-.247-.057-.489-.117-.722-.18l-.001-.001c-.72-.19-1.394-.403-2.02-.645a1.125 1.125 0 01-.63-1.09c.224-1.68.95-3.158 2.06-4.321a59.902 59.902 0 014.246-1.391 59.902 59.902 0 014.246 1.391c1.11.463 1.836 1.94 2.06 4.321a1.125 1.125 0 01-.63 1.09c-.626.242-1.3.455-2.02.645l-.001.001c-.233.063-.475.123-.722.18l-.001.001a60.09 60.09 0 01-1.104.238l-.002.002c-.24.048-.482.095-.728.138l-.001.001a48.567 48.567 0 01-1.423.23z"/>
              </svg>
            </div>
            <div class="text-left min-w-0">
              <p class="font-semibold text-gray-700">{{ formattedEnrollmentDate }} </p>
              <p class="text-sm text-gray-500">入学时间</p>
            </div>
          </div>
          <!-- 地区信息 -->
          <div class="info-grid-item">
            <div
                class="flex-shrink-0 w-9 h-9 rounded-lg flex items-center justify-center mr-3 bg-blue-100 text-blue-600">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                   stroke="currentColor" class="w-5 h-5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/>
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/>
              </svg>
            </div>
            <div class="text-left min-w-0">
              <p class="font-semibold text-gray-700 truncate" :title="user.hometown">{{ user.hometown }}</p>
              <p class="text-sm text-gray-500">IP: {{ user.ipCity }}</p>
            </div>
          </div>
          <!-- 加入时间 -->
          <div class="info-grid-item">
            <div
                class="flex-shrink-0 w-9 h-9 rounded-lg flex items-center justify-center mr-3 bg-purple-100 text-purple-600">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                   stroke="currentColor" class="w-5 h-5">
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0h18"/>
              </svg>
            </div>
            <div class="text-left min-w-0">
              <p class="font-semibold text-gray-700">{{ formattedJoinDate }}</p>
              <p class="text-sm text-gray-500">加入社区</p>
            </div>
          </div>
          <!-- 年龄信息 -->
          <div class="info-grid-item">
            <div
                class="flex-shrink-0 w-9 h-9 rounded-lg flex items-center justify-center mr-3"
                :class="{
                'bg-blue-100 text-blue-500': user.gender === 'male',
                'bg-pink-100 text-pink-500': user.gender === 'female',
              }"
            >
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                   stroke="currentColor" class="w-5 h-5">
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/>
              </svg>
            </div>
            <div class="text-left min-w-0">
              <p class="font-semibold text-gray-700">{{ user.age }} 岁</p>
              <p class="text-sm text-gray-500">基本信息</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserInfoCard',
  props: {
    user: {
      type: Object,
      required: true,
      default: () => ({
        nickname: '默认用户',
        avatar: 'https://via.placeholder.com/150',
        backgroundImage: 'https://ts4.tc.mm.bing.net/th/id/OIP-C.Hbkk9AkInuzpK6UyPKXyYQHaEK?rs=1&pid=ImgDetMain&o=7&rm=3',
        schoolName: '未知大学',
        age: 20,
        gender: 'male',
        isMember: false,
        enrollmentDate: '2024-01',
        major: '未知专业',
        class: '未知班级',
        hometown: '未知',
        ipCity: '未知',
        postCount: 0,
        likeCount: 0,
        commentCount: 0,
        followingCount: 0,
        followerCount: 0,
        bio: '这个人很懒，什么都没留下...',
        joinDate: '2024-01-01',
        tags: []
      })
    },
    userId: {
      type: [Number, String],
      required: true
    },
    isCurrentUser: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    formattedJoinDate() {
      if (!this.user || !this.user.joinDate) return '未知';
      const [year, month] = this.user.joinDate.split('-');
      return `${year}-${month}`;
    },
    formattedEnrollmentDate() {
      if (!this.user || !this.user.enrollmentDate) return '未知';
      const [year, month] = this.user.enrollmentDate.split('-');
      return `${year}-${month}`;
    }
  },
  methods: {
    showList(type) {
      this.$emit('show-list', type);
    },
    handleFollowClick() {
      // TODO: 实现关注用户的逻辑
      this.$emit('follow', Number(this.userId));
    },
    handleEditClick() {
      // 触发编辑信息事件
      this.$emit('edit-profile', Number(this.userId));
    },
    formatNumber(num) {
      if (num === undefined || num === null) return '0';

      // 对于大数字进行格式化
      if (num >= 1000000) {
        return (num / 1000000).toFixed(1).replace(/\.0$/, '') + 'm';
      } else if (num >= 1000) {
        return (num / 1000).toFixed(1).replace(/\.0$/, '') + 'k';
      } else {
        return num.toString();
      }
    }
  }
}
</script>

<style scoped>
.user-card {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  will-change: transform, box-shadow; /* 性能优化 */
}

.user-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.avatar-wrapper {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.user-card:hover .avatar-wrapper {
  transform: scale(1.1) rotate(5deg);
}

.gender-badge {
  border: 2px solid white;
}

.follow-button {
  transition: all 0.3s ease;
}

.follow-button:hover {
  transform: translateY(-2px);
}

.follow-button:active {
  transform: translateY(0) scale(0.95);
}

.tag-item {
  cursor: default;
}

.stat-item {
  transition: transform 0.2s ease-in-out;
}

.stat-item:hover {
  transform: scale(1.1);
}

.stat-value {
  letter-spacing: -0.5px;
}

.stat-label {
  letter-spacing: -0.5px;
}

.info-grid-item {
  display: flex;
  align-items: center;
  padding: 0.65rem; /* 微调内边距 */
  border-radius: 0.75rem;
  background-color: rgba(249, 250, 251, 0.7); /* 增加透明度 */
  border: 1px solid rgba(229, 231, 235, 0.8); /* 添加细边框 */
  transition: all 0.3s ease;
}

.info-grid-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background-color: white;
  border-color: transparent; /* 悬浮时移除边框 */
}

</style>